<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        list-style: none;
        display: block;
        height: 300px;
        overflow: auto;
        width: 120px;
        background-color: lightgoldenrodyellow;

    }
    a{
        text-decoration: none;
        color: #999999;
    }
    a:hover{
        color: black;
    }
</style>
<body>
<div>
    <input type="text" id="txt"placeholder="请选择"style="text-align: center">
    <ul id="box" style="display: none">
        <li><a href=""></a> </li>
    </ul>
</div>

<script>
    var txt = document.getElementById('txt');
    var box = document.getElementById('box');
    var arrpro = [];
    arrpro[0] = {city_no:1042,city_name:"安徽省"};
    arrpro[1] = {city_no:1061,city_name:"山东省"};
    arrpro[2] = {city_no:1079,city_name:"江苏省"};
    arrpro[3] = {city_no:1093,city_name:"上海市"};
    arrpro[4] = {city_no:1095,city_name:"广东省"};
    arrpro[5] = {city_no:1117,city_name:"浙江省"};
    arrpro[6] = {city_no:1129,city_name:"福建省"};
    arrpro[7] = {city_no:1139,city_name:"北京市"};
    arrpro[8] = {city_no:1141,city_name:"重庆市"};
    arrpro[9] = {city_no:1146,city_name:"甘肃省"};
    arrpro[10] = {city_no:1161,city_name:"广西省"};
    arrpro[11] = {city_no:1177,city_name:"贵州省"};
    arrpro[12] = {city_no:1187,city_name:"海南省"};
    arrpro[13] = {city_no:1190,city_name:"河北省"};
    arrpro[14] = {city_no:1202,city_name:"河南省"};
    arrpro[15] = {city_no:1220,city_name:"黑龙江省"};
    arrpro[16] = {city_no:1235,city_name:"湖北省"};
    arrpro[17] = {city_no:1248,city_name:"湖南省"};
    arrpro[18] = {city_no:1263,city_name:"江西省"};
    arrpro[19] = {city_no:1275,city_name:"吉林省"};
    arrpro[20] = {city_no:1285,city_name:"辽宁省"};
    arrpro[21] = {city_no:1300,city_name:"内蒙古"};
    arrpro[22] = {city_no:1313,city_name:"宁夏"};
    arrpro[23] = {city_no:1318,city_name:"青海省"};
    arrpro[24] = {city_no:1326,city_name:"山西省"};
    arrpro[25] = {city_no:1338,city_name:"陕西省"};
    arrpro[26] = {city_no:1349,city_name:"四川省"};
    arrpro[27] = {city_no:1369,city_name:"天津市"};
    arrpro[28] = {city_no:1371,city_name:"新疆"};
    arrpro[29] = {city_no:1388,city_name:"西藏"};
    arrpro[30] = {city_no:1396,city_name:"云南省"};
    arrpro[31] = {city_no:1414,city_name:"香港"};
    arrpro[32] = {city_no:1416,city_name:"澳门"};
    arrpro[33] = {city_no:1418,city_name:"台湾"};
    arrpro[34] = {city_no:1420,city_name:"国外"};
    console.log(arrpro);
    var s = '';
    for(i=0;i<arrpro.length;i++){
        s += '<li><a href = #" title="'+arrpro[i].city_no+'">'+arrpro[i].city_name+'</a></li>'
    }
    box.innerHTML = s;
    txt.onfocus = function(){
        box.style.display = 'block';
    };
    txt.onblur = function(){
        box.style.display = 'none';
    }

</script>
</body>
</html>